import axios from 'axios'
// 引入全局弹框组件
import { Message } from 'element-ui'
import router from '@/router'
// 导入vuex数据
import store from '@/store'
// const baseUrl = process.env.NODE_ENV === 'development' ? '/api' : '/pro-api'
// 1. 创建axios实例, 不同实例可以发送不同配置的请求: 比如baseUrl地址不一样的请求
const service = axios.create({
  // 开发环境  以 /api开始拼接
  // 生产环境  目前不清除以什么拼接
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000 // 请求超时5秒
})

// 2.配置请求拦截器(①统一注入token)
service.interceptors.request.use(config => {
  // ①配置请求头  依据有没有token来配置请求头
  // 思考: 登录按钮发送的请求  会不会也携带token? 想看到登录页, 必定是没有token的
  if (store.getters.token) {
    // ②配置请求头
    config.headers.Authorization = 'Bearer ' + store.getters.token
  }
  // 所有的请求都需要这个config
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 3.配置响应拦截器(①统一处理返回值问题, 解构好data再传给程序员  ②统一处理数据异常(统一弹框提示信息))
service.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    // ①统一处理axios包装后的数据
    const { data } = response
    // ②判断success到底是true还是false
    if (data.success === true) {
      return data.data
    } else {
      // 通过message提示用户有问题(全局提示)
      // 目的: 全局提示
      Message.error(data.message)
      // 把失败的消息直接丢进catch
      // 把success为false的全部归类到catch里面去
      return Promise.reject(new Error(data.message))
    }
  },
  function(error) {
    // 防止点不出response 又报语法错误  让代码健壮性加强    10001伪造的....
    if (error.response && error.response.data && error.response.data.code === 10002) {
      // token失效
      // 删除token, 删除用户信息, 跳转登录页
      store.dispatch('user/logout')
      router.push('/login')
    }
    Message.error(error.message)
    // 抛出错误
    return Promise.reject(error)
  })

// 4.导出实例对象
export default service

